<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
        <h:outputStylesheet name="DataTables-1.9.4/media/css/jquery.dataTables.css"/>
        <h:outputScript name="DataTables-1.9.4/media/js/jquery.js"/>
        <h:outputScript name="init.js" />
        <h:outputScript name="DataTables-1.9.4/media/js/jquery.dataTables.js"/>
        <script language="javascript">
            $(document).ready(function() {
                $("[id$='playerTable']").dataTable();
            } );
        </script>
    </h:head>
    <h:body>
        <div>
        <f:view>
            <h:form>
                <h1><h:outputText value="Player List"/></h1>
                <h:dataTable id="playerTable" value="#{nflplayerListBean.players}" var="item">
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value=""/>
                        </f:facet>
                        <h:commandButton value="ADD"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Id"/>
                        </f:facet>
                        <h:outputText value="#{item.id}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="FirstName"/>
                        </f:facet>
                        <h:outputText value="#{item.firstName}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="LastName"/>
                        </f:facet>
                        <h:outputText value="#{item.lastName}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Position"/>
                        </f:facet>
                        <h:outputText value="#{item.position}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Number"/>
                        </f:facet>
                        <h:outputText value="#{item.number}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Status"/>
                        </f:facet>
                        <h:outputText value="#{item.status}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Height"/>
                        </f:facet>
                        <h:outputText value="#{item.height}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Weight"/>
                        </f:facet>
                        <h:outputText value="#{item.weight}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Age"/>
                        </f:facet>
                        <h:outputText value="#{item.age}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="BirthDate"/>
                        </f:facet>
                        <h:outputText value="#{item.birthDate}">
                            <f:convertDateTime pattern="MM/dd/yyyy" />
                        </h:outputText>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="College"/>
                        </f:facet>
                        <h:outputText value="#{item.college}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="ExperienceYears"/>
                        </f:facet>
                        <h:outputText value="#{item.experienceYears}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="HighSchool"/>
                        </f:facet>
                        <h:outputText value="#{item.highSchool}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="PhotoURL"/>
                        </f:facet>
                        <h:graphicImage url="#{item.photoURL}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Byeweek"/>
                        </f:facet>
                        <h:outputText value="#{item.byeweek}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Active"/>
                        </f:facet>
                        <h:outputText value="#{item.active}"/>
                    </h:column>
                </h:dataTable>
            </h:form>
        </f:view>
        </div>
    </h:body>
</html>

